<template>
  <div id="banner">
    <div class="banner" @click="clickBanner">
      <img src="http://img1.qunarzz.com/sight/p0/1606/b1/b1cc073771733f6890.water.jpg_600x330_13b1b70d.jpg">
      <div class="info">
        <div class="pages iconfont">
          &#xe72f; 42张
        </div>
        <div class="title">
          白鹿温泉(AAAA景区)
        </div>
      </div>
    </div>
    <lightbox :boxImg="boxImg" v-if="showBox" @close='clickBanner'></lightbox>
  </div>
</template>

<script>
import lightbox from './lightbox'
export default {
  name: 'banner',
  data () {
    return {
      showBox: false,
      boxImg: [{
        id: '001',
        url: 'http://img1.qunarzz.com/sight/p0/1606/30/3098d8a391ed460e90.water.jpg_r_800x800_8d6d49fa.jpg'
      }, {
        id: '002',
        url: 'http://img1.qunarzz.com/sight/p0/1606/b1/b1cc073771733f6890.water.jpg_r_800x800_e9bacd7a.jpg'
      }]
    }
  },
  components: {
    lightbox
  },
  methods: {
    clickBanner () {
      this.showBox = !this.showBox
    }
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    width: 100%;
    height: 0;
    padding-bottom: 55%;
    color #fff
    position relative
    img
      width: 100%;
    .info
      position absolute
      bottom: 10px;left: 10px;
      .pages
        text-align center
        line-height: 16px;
        padding: 4px 0;
        width: 70px;
        font-size: 12px;
        background-color rgba(0,0,0,.4)
        border-radius 40px
        margin-bottom: 5px;
</style>
